<!--联系人信息面板组件-->
<template>
  <!--展示联系人信息-->
  <div v-if="contact" class="card w-full bg-base-100 shadow-xl">
    <figure><img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" oncontextmenu="return false"/></figure>
    <div class="card-body">
      <div class="avatar">
        <div class="w-24 mask mask-squircle">
          <img :src="contact.avatarUrl" oncontextmenu="return false"/>
        </div>
      </div>

      <h2 class="card-title">{{contact.aliasName?contact.aliasName:contact.nickname}}</h2>
      <span v-if="contact.gender===1"><IconMale/></span>
      <span v-if="contact.gender===2"><IconFemale/></span>
      <span>昵 称 {{contact.nickname}}</span>
      <span>账号名 {{contact.username}}</span>
      <p>{{contact.profile}}</p>
      <div class="card-actions justify-center">
        <button class="btn btn-ghost btn-sm" @click="clickMessage">发消息</button>
        <button class="btn btn-ghost btn-sm" @click="clickVoice">语音</button>
        <button class="btn btn-ghost btn-sm" @click="clickVideo">视频</button>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import type {ContactsItem} from '../../models/contacts.ts';
import IconMale from "@/components/icons/IconMale.vue";
import IconFemale from "@/components/icons/IconFemale.vue";
import {useChatStore} from "@/stores/chat.ts";
import {defineProps, inject, ref, toRaw} from 'vue'

//父组件传值时的定义
const props = defineProps<{
  contact?: ContactsItem;
}>();
const toRoute = inject('toRoute')

const chatStore = useChatStore()


const clickAdd = ()=>{
  console.debug("clickAdd ...")
}


const clickMessage = () => {
  console.log(`clickMessage...`);
  chatStore.obtainChatting(toRaw(props.contact))
  toRoute("/chats")
}
const clickVoice = () => {
  console.log(`clickVoice...`);

}
const clickVideo = () => {
  console.log(`clickVideo...`);

}

</script>

<style scoped lang="scss">

</style>